<template>
    <ul class="types">
        <li :class="type === '-' && 'selected' " @click="selectType('-')">支出</li>
        <li :class="type === '+' && 'selected' " @click="selectType('+')">收入</li>
    </ul>
</template>

<script lang="ts">
    import Vue from "vue";
    import {Component, Prop} from "vue-property-decorator";

    @Component //装饰器
    export default class Types extends Vue {
        type = "-"; // '-'表示支出，'+'表示收
        selectType(type: string) { // type 只能是'-'和'+'中的一个
            if (type !== "-" && type !== "+") {
                throw new Error("type is unknown");
            }
            this.type = type;
        }
    }
</script>

<style lang="scss" scoped>
    .types {
        background: #c4c4c4;
        display: flex;
        text-align: center;
        font-size: 24px;

        > li {
            width: 50%;
            height: 64px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            /*当前li被选中使用 &，如果直接写.selected代表li里面的selected*/
            &.selected::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 4px;
                background: #333;
            }
        }
    }
</style>